<template>
	<xy-loading v-if="loadingShowStatus"></xy-loading>
	<view v-else class="main">
		<image :src="productData.bg||''" mode="widthFix" class="bg"></image>
		<view class="bg-white content u-padding-top-40">
			<view>
				<view class="u-text-center" v-if="productData.logo">
					<image :src="productData.logo" mode="widthFix" class="logo"></image>
				</view>
				<view>
					<h2 class="title bold" v-html="productData.title"></h2>
					<h3 class="son-title u-text-center u-padding-top-15" >内部动态码一人一码专属渠道</h3>
				</view>
			</view>
			<image :src="productData.qr_code" mode="widthFix" class="qr-code"></image>
			
			<view v-if="productData.parent_information_type == 1">
				<view class="u-font-28 u-text-center">客户经理:{{productData.parent_name||''}}</view>
				<view class="u-font-28 u-text-center">客户电话:{{productData.parent_phone||''}}</view>
			</view>
			<view class="u-padding-top-40 u-light-color" v-if="productData.end_time">
				<view class="u-font-26 u-text-center">失效时间:{{productData.end_date||''}}</view>
			</view>
			<view class="hint u-margin-top-25 u-border-top">
				<view class="u-padding-top-25 u-padding-bottom-10 nr refresh-btn" @click="loadingShowStatus = true;showQrCodeFun(true)">刷新</view>
			</view>
			
		</view>
	</view>
</template>


<script>
	import {
		showQrCode
	} from "@/api/app";
	export default {
		data() {
			return {
				id:0,
				productData:{},
				loadingShowStatus:true
			};
		},
		onLoad: function(options) {
			this.id = options.id;
		
			this.showQrCodeFun();
		},
		methods:{
			captchaSrc(e) {
				return 'e.replace(/[\r\n]/g, "")';
			},
			showQrCodeFun(s) {
				showQrCode({
					id: this.id,
					status:s?'refresh':''
				}).then(res => {
					if (res.code == 1) {
						this.productData = res.data
						this.loadingShowStatus = false
					}
				});
			},
		}
		
	}
</script>

<style lang="scss">
page {
		background: #f0f4f6;
	}

	.bg {
		width: 100%;
	}
	
	.logo{
		width: 120rpx;
		height: 120rpx;
	}

	.content {
		top: 50%;
		left: 50%;
		width: 90%;
		position: fixed;
		color: #525252;
		border-radius: 10px;
		transform: translate(-50%, -50%);
		padding: 10px 15px 10px 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.title {
			color: #525252;
			font-size: 28px;
			text-align: center;
		}
		
		.son-title{
			
		}

		.qr-code {
			width: 55%;
			height: 80%;
			margin: 20px auto;
			aspect-ratio: 1/1;
			display: block;
		}

		.hint {
			font-size: 20px;
			text-align: center;
			
			.hint-btn-style{
				margin: 0 auto 40rpx;
				border-radius: 100rpx;
				background-color: #66a6ff;
			}
		}

		.refresh-btn{
			color: #66a6ff;
		}
	}
</style>
